<template>
  <div>
    <headers title="发布房源"></headers>
    <div class="form">
      <van-form>
        <!-- 房源信息 -->
        <div class="house">
          <div class="house-header">房源信息</div>
          <div class="house-body">
            <!-- 小区名称 -->
            <van-button @click="communityNameFn">
              <span class="house-left">小区名称</span>
              <span class="house-right right">
                {{ community ? community.communityName : '请输入小区名称' }}
                <i class="iconfont icon-backRit"></i>
              </span>
            </van-button>
            <!-- 租金 -->
            <van-field
              v-model="price"
              placeholder="请输入租金/月"
              class="house-price"
            >
              <template #label>租&emsp;&emsp;金</template>
              <template #right-icon>
                <span>￥/月</span>
              </template>
            </van-field>
            <!-- 建筑面积 -->
            <van-field
              v-model="size"
              label="建筑面积"
              placeholder="请输入建筑面积"
            >
              <template #right-icon>
                <span>m²</span>
              </template>
            </van-field>
            <!-- 户型 -->
            <van-field
              readonly
              clickable
              name="picker"
              :value="household"
              @click="showHousehold = true"
            >
              <template #label>户&emsp;&emsp;型</template>
              <template #right-icon>
                <span class="house-right right"
                  >请选择<i class="iconfont icon-backRit"></i
                ></span>
              </template>
            </van-field>
            <!-- 所在楼层 -->
            <van-field
              readonly
              clickable
              name="picker"
              :value="floors"
              label="所在楼层"
              @click="showFloor = true"
            >
              <template #right-icon>
                <span class="house-right right"
                  >请选择<i class="iconfont icon-backRit"></i
                ></span>
              </template>
            </van-field>
            <!-- 朝向 -->
            <van-field
              readonly
              clickable
              name="picker"
              :value="toward"
              @click="showToward = true"
            >
              <template #label>朝&emsp;&emsp;向</template>
              <template #right-icon>
                <span class="house-right right"
                  >请选择<i class="iconfont icon-backRit"></i
                ></span>
              </template>
            </van-field>
          </div>
        </div>
        <!-- 房屋标题 -->
        <div class="house-add-title">
          <div class="house-header">房屋标题</div>
          <div class="house-add-title-body">
            <van-field
              v-model="houseTitle"
              placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
            />
          </div>
        </div>
        <!-- 房屋图像 -->
        <div class="house-add-pigs">
          <div class="house-header">房屋图像</div>
          <div class="house-add-pigs-body">
            <van-field name="uploader">
              <template #input>
                <van-uploader v-model="uploader">
                  <template #default>
                    <div class="uploader">
                      <van-icon name="plus" />
                    </div>
                  </template>
                </van-uploader>
              </template>
            </van-field>
          </div>
        </div>
        <!-- 房屋配置 -->
        <house-supporting
          @supporting="supportingList = $event"
        ></house-supporting>
        <!-- 房屋描述 -->
        <div class="house-add-desc">
          <div class="house-header">房屋描述</div>
          <div class="house-add-desc-body">
            <van-field
              v-model="message"
              rows="1"
              autosize
              type="textarea"
              placeholder="请输入房屋描述信息"
            />
          </div>
        </div>
        <!-- 取消提交 -->
        <footer class="footer">
          <van-button class="cancel" @click="onCancel">取消</van-button>
          <van-button class="submit" @click="onSubmit">提交</van-button>
        </footer>
      </van-form>
    </div>
    <!-- 户型弹层 -->
    <van-popup v-model="showHousehold" position="bottom">
      <picker
        :columns="householdList"
        @close="showHousehold = false"
        @confirm="household = $event"
      ></picker>
    </van-popup>
    <!-- 所在楼层弹层 -->
    <van-popup v-model="showFloor" position="bottom">
      <picker
        :columns="floorList"
        @close="showFloor = false"
        @confirm="floors = $event"
      ></picker>
    </van-popup>
    <!-- 朝向弹层 -->
    <van-popup v-model="showToward" position="bottom">
      <picker
        :columns="towardList"
        @close="showToward = false"
        @confirm="toward = $event"
      ></picker>
    </van-popup>
  </div>
</template>

<script>
import Headers from '@/components/Headers.vue'
import Picker from './components/Picker.vue'
import HouseSupporting from './components/HouseSupporting.vue'
import { userPostHousesAPI, housesParamsAPI, setHousesImageAPI } from '@/api'
import { mapState, mapMutations } from 'vuex'
export default {
  name: '',
  components: {
    Headers,
    Picker,
    HouseSupporting
  },
  props: {},
  data() {
    return {
      householdList: ['一室', '二室', '三室', '四室', '四室+'],
      floorList: ['高楼层', '中楼层', '低楼层'],
      towardList: ['东', '西', '南', '北', '东南', '东北', '西南', '西北'],
      roomType: [],
      oriented: [],
      floor: [],
      supporting: [],
      showHousehold: false,
      showFloor: false,
      showToward: false,
      price: '',
      size: '',
      household: '',
      floors: '',
      toward: '',
      houseTitle: '',
      uploader: [],
      supportingList: [],
      message: ''
    }
  },
  computed: {
    ...mapState(['community'])
  },
  watch: {},
  created() {
    this.housesParams()
  },
  methods: {
    ...mapMutations(['SET_COMMUNITY']),
    async housesParams() {
      const { body } = await housesParamsAPI()
      this.roomType = body.roomType
      this.oriented = body.oriented
      this.floor = body.floor
      this.supporting = body.supporting
    },
    // 取消
    onCancel() {
      this.$dialog
        .confirm({
          title: '提示',
          message: '放弃发布房源？',
          confirmButtonText: '继续编辑',
          confirmButtonColor: '#108ee9',
          cancelButtonText: '放弃',
          width: '270'
        })
        .then(() => {})
        .catch(() => {
          this.$router.back()
          this.$store.commit('SET_COMMUNITY', {})
        })
    },
    // 提交
    async onSubmit() {
      if (this.uploader.length === 0) {
        return this.$toast('请上传房源图片')
      }
      const formData = new FormData()
      this.uploader.forEach((item) => formData.append('file', item.file))
      const { body } = await setHousesImageAPI(formData)
      try {
        this.$toast.loading({
          message: '正在发布中，请稍后...',
          forbidClick: true
        })
        userPostHousesAPI({
          title: this.houseTitle,
          description: this.message,
          houseImg: body.join('|'),
          oriented: this.oriented.find((item) => item.label === this.toward)
            .value,
          supporting: this.supportingList.join('|'),
          price: this.price,
          roomType: this.roomType.find((item) => item.label === this.household)
            .value,
          size: this.size,
          floor: this.floor.find((item) => item.label === this.floors).value,
          community: this.community.community
        })
        this.$dialog
          .confirm({
            title: '提示',
            message: '房源发布成功！',
            confirmButtonText: '继续发布',
            confirmButtonColor: '#108ee9',
            cancelButtonText: '去查看',
            width: '270'
          })
          .then(() => {
            this.$router.push('/rent/search')
          })
          .catch(() => {
            this.$router.push('/home/list')
          })
      } catch (error) {
        this.$toast.fail('请先完善房屋信息')
      }
    },
    communityNameFn() {
      this.$router.push('/rent/search')
      this.SET_COMMUNITY(null)
    }
  }
}
</script>

<style scoped lang="less">
:deep(.form) {
  background-color: #f5f5f9;
  .house-header {
    color: #333;
    font-size: 14px;
    padding: 15px 15px 9px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
  }
  .house-left {
    font-size: 14px;
    color: #666;
  }
  .house-right {
    font-size: 14px;
    color: #888;
    line-height: 1;
  }
  .icon-backRit {
    font-size: 14px;
    margin-left: 8px;
  }
  .house {
    .house-header {
      color: #21b97a;
      font-size: 15px;
      border-bottom: unset;
    }
  }
  .house-body {
    .van-button {
      width: 100%;
      .van-button__text {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
  .footer {
    display: flex;
    height: 45px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 20;
    .van-button {
      height: 45px;
    }
    .cancel {
      font-size: 15px;
      border: unset;
      flex: 1;
      color: #21b97a;
    }
    .submit {
      flex: 1;
      font-size: 15px;
      border: unset;
      color: #fff;
      background-color: #21b97a;
    }
  }
  .house-add-pigs {
    .uploader {
      width: 82.75px;
      height: 82.75px;
      border-radius: 3px;
      border: 1px solid #ddd;
      background-color: #fff;
      line-height: 90px;
      text-align: center;
      .van-icon {
        font-size: 30px;
        color: #ddd;
      }
    }
  }
  .active {
    color: #21b97a;
  }
  .house-add-desc {
    padding: 20px 0 70px;
    .van-field__body {
      height: 128px;
      align-items: flex-start;
    }
  }
}
</style>
